<template>
	<view class="interestService-page bgimg1">
		<u-sticky bgColor="transparent" customNavHeight="0" offsetTop="0" class="bgimg1">
			<u-navbar :title="$t('hhh.t146')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
				:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
			<u-gap height="100" bgColor="transparent"></u-gap>
			<u-tabs :list="interestTabs" lineWidth="30" lineHeight="5" lineColor="#E97AFF" inactiveStyle="color:#ffffff"
				:scrollable="interestTabs.length < 4?false:true" activeStyle="color:#E97AFF"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @tap="changeTab"></u-tabs>
		</u-sticky>
		<view class="p-3">
			<block v-for="(item,index) in dataList" :key="index">
				<IndexCard :item="item"></IndexCard>
			</block>
			<nodata v-if="dataList.length === 0"></nodata>
		</view>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	import IndexCard from '@/pages/index/components/card-item.vue'
	export default {
		components: {
			IndexCard
		},
		data() {
			return {
				list1: [{
					name: 'Game',
				}, {
					name: 'Voice Call',
				}, {
					name: 'PC Games'
				}, {
					name: 'Watch movie'
				}, ],
				scrollTop: 0,
				page: 1,
				dataList: [],
				tempList: [],
				curtagIndex: 0,
				interestTabs: []
			}
		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			this.userInterests()
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.playerSearch()
		},
		methods: {
			changeTab(val) {
				this.curtagIndex = val.id
				this.page = 1
				this.playerSearch()
			},
			userInterests() {
				HttpApi.userInterests().then(res => {
					if (res.code === 1) {
						const list = res.data.list
						if (!list.length) return
						this.interestTabs = list
						this.curtagIndex = list[0].id
						this.playerSearch()
					}
				})
			},
			playerSearch() {
				HttpApi.playerSearch({
					page: this.page,
					tags: this.curtagIndex,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.list || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.interestService-page {
		background-position: center -50px;
	}
</style>